<template>
    <div class="container block">
        <div class="header">
            <div class="search">
                <input
                    type="text"
                    placeholder="请输入人员名称"
                    class="input search-input"
                    v-model="searchText"
                    @keydown.enter="search"
                />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
            </div>
            <div class="detail">
                <span class="detail-key">人数：</span>
                <span class="detail-value">{{ count.count }}人</span>
                <span class="detail-key">男：</span>
                <span class="detail-value">{{ count.men }}人</span>
                <span class="detail-key">女：</span>
                <span class="detail-value">{{ count.women }}人</span>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
            >
                <el-table-column width="120" prop="workerName" label="姓名" >
                    <template #default="scope">
                        <div :class="[scope.row.nickName?.length ?? 0 + scope.row.workerName.length <= 10 ? 'align-items' : '']">
                            <div>
                                {{ scope.row.workerName }}
                            </div>
                            <div v-if="scope.row.nickName">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="此处为备注名"
                                    placement="top-start"
                                >
                                    <div class="nickName">
                                        {{ scope.row.nickName ? '('+ scope.row.nickName +')' : '' }}
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="70"
                    prop="sex"
                    label="性别"
                    :formatter="row => (row.sex === '0' ? '男' : '女')"
                />
                <el-table-column prop="phone" label="电话号码" />
                <el-table-column
                    width="200"
                    prop="idCardNo"
                    label="身份证号码"
                />
                <el-table-column label="身份证照片">
                    <template #default="scope">
                        <p
                            class="link"
                            v-if="scope.row.ownIdCardFront"
                            @click="preview(scope.row)"
                        >
                            点击查看
                        </p>
                        <p v-else>暂未上传</p>
                    </template>
                </el-table-column>
                <el-table-column
                    width="200"
                    prop="bankCardNo"
                    label="银行卡号"
                />
                <el-table-column
                    width="200"
                    prop="openBankAddress"
                    label="开户行"
                />
                <el-table-column
                    width="160"
                    prop="serveCompanyName"
                    label="最近工作派遣单位"
                />
                <el-table-column prop="getSalaryTime" label="最后领薪时间" />
                <el-table-column
                    prop="getTotalMoney"
                    label="共领薪"
                    :formatter="
                        row =>
                            row.getTotalMoney ? row.getTotalMoney + '元' : ''
                    "
                />
                <el-table-column label="操作">
                    <template #default="scope">
                        <p
                            class="link"
                            @click="
                                $router.push({
                                    path: '/book/detail/' + scope.row.userId
                                })
                            "
                        >
                            查看详情
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>

    <el-image-viewer
        hide-on-click-modal
        @close="closeImgViewer"
        :url-list="imageList"
        v-if="showImageViewer"
    />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { getBookWorkers, getWorkersStatistics, WorkerDto } from '@/api/workers'

export default defineComponent({
    name: 'Book',
    data () {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as WorkerDto[],
            searchText: '',
            searchValue: '',
            count: {
                men: 0,
                count: 0,
                women: 0
            },
            showImageViewer: false,
            imageList: [] as string[]
        }
    },
    created () {
        this.handleCurrentChange()
        getWorkersStatistics().then(res => {
            this.count = res
        })
    },
    methods: {
        preview (row: WorkerDto) {
            this.imageList = [row.ownIdCardFront, row.idCardBack]
            this.showImageViewer = true
        },
        handleCurrentChange () {
            getBookWorkers({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                searchText: this.searchValue
            }).then(res => {
                this.total = res.total
                this.tableData = res.list
            })
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.handleCurrentChange()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        closeImgViewer () {
            this.showImageViewer = false
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.nickName
    color #FFC53D
</style>
